<template>
<div>
  <div class="qa-title">
    <!-- <span class="qa-label" :class="'qa-label-'+ d.type"  v-if="d.type!=='title'">{{QA_TYPE[d.type]}}</span> -->
    <span>{{d.title}}</span>
  </div>
  <div class="qa-content">
  
    <template v-if="d.type === 'radio'" v-for="(r, index) in d.options">
      <mu-radio :label="r.label"  :key="index" :nativeValue="r.value" v-model="d.model"/>
      <!-- <br :key="index" /> -->
        <div class="children-content" v-show="r.children && d.model=== r.value" :key="index">
            <p v-for="(r1, index1) in r.children" :key="index1">
              <qa-item :d="r1"></qa-item>
            </p>
        </div>
    </template>

    <template v-if="d.type === 'checkbox'" v-for="(r, index) in d.options">
      <mu-checkbox :label="r.label" :key="index" :nativeValue="r.value" v-model="d.model"  />
      <br :key="index" />
      <div class="children-content" v-show="r.children && d.model=== r.value" :key="index">
            <p v-for="(r1, index1) in r.children" :key="index1">
              <qa-item :d="r1"></qa-item>
            </p>
        </div>
    </template>

    <template v-if="d.type === 'input'">
      <template  v-for="(r, index) in d.options" >
        <div v-if ="r.XMLB > 2" :key="index">
          {{r.QZWB}}
          <mu-text-field v-if="r.SJGS !== 'yyyy-MM-dd'" :hintText="r.SJGS"  :key="index" :nativeValue="r.value" v-model="r.model"/>
          <mu-date-picker v-else :hintText="r.SJGS"  :key="index" v-model="r.model"  />
          {{r.HZWB}}
          <br />
        </div>
        <div v-else :key="index" class="color-gray">
          {{r.label}}
        </div>
          <div class="children-content" v-show="r.children" :key="index">
            <p v-for="(r1, index1) in r.children" :key="index1">
              <qa-item :d="r1"></qa-item>
            </p>
        </div>
      </template>
    </template>
</div>
    
</div>
</template>

<script>
const QA_TYPE = {
  radio: '单选',
  checkbox: '多选',
  input: '填空'
}
import QaItem from './QaItem'
export default {
  name: 'qa-item',
  props: ['d'],
  data () {
    return {
      QA_TYPE: QA_TYPE
    }
  },
  components: {QaItem}
}
</script>

<style lang="less" scoped>
.children-content {
  border:1px solid #f5f5f5;
  margin: 0.8em 0;
  padding: 0 0.3em;
  /* border-left: 2px solid #ddd; */
  /* box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); */
}
.mu-text-field {
  width: auto;
}
.mu-radio {
  display: block;
  margin: 10px 0;
}
.qa-label {
    height: 18px;
    width: 40px;
    display: inline-block;
    color: #fff;
    font-size: 12px;
    padding-left: 8px;
    &.qa-label-radio{
      background-image: url(../assets/images/tab_单选@2x.png);
      background-size: cover;
    }
    &.qa-label-checkbox {
      background-image: url(../assets/images/tab_多选@2x.png);
      background-size: cover;
    }
    &.qa-label-input {
      background-image: url(../assets/images/tab_填空@2x.png);
      background-size: cover;
    }
  }
  .qa-content {
    padding-top: 10px;
    
  }
</style>
